<!-- components/VerticalTabs/VerticalTabs.vue -->
<!-- 纵向选项卡 -->

<template>
	<view class="vt-container">
		<!-- 左侧标签栏 -->
		<scroll-view class="vt-sidebar" scroll-y>
			<view
				v-for="(tab, index) in tabs"
				:key="index"
				:class="['vt-tab-item', { active: current === index }]"
				@click="handleTabClick(index)"
			>
				{{ tab.title }}
			</view>
		</scroll-view>

		<!-- 右侧内容区 -->
		<view class="vt-content">
			<slot :current="current" :tabs="tabs">
				<view
					v-show="current === index"
					v-for="(tab, index) in tabs"
					:key="index"
					class="vt-content-item"
				>
					{{ tab.content }}
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'VerticalTabs',
	props: {
		// 当前选中的索引
		value: {
			type: Number,
			default: 0,
		},
		// 标签数组 [{ title: 'xxx', content: '...' }]
		tabs: {
			type: Array,
			required: true,
			default: () => [],
		},
		// 主题色（可外部传入）
		themeColor: {
			type: String,
			default: '#007AFF',
		},
	},
	data() {
		return {
			current: this.value,
		};
	},
	watch: {
		value(newVal) {
			this.current = newVal;
		},
		current(newVal) {
			this.$emit('input', newVal); // 支持 v-model
		},
	},
	methods: {
		handleTabClick(index) {
			if (this.current !== index) {
				this.current = index;
				this.$emit('change', index); // 通知外部切换
			}
		},
	},
};
</script>

<style scoped>
.vt-container {
	display: flex;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	font-size: 14px;
}

.vt-sidebar {
	width: 30%;
	background-color: #f5f5f5;
}

.vt-tab-item {
	padding: 15px 10px;
	text-align: center;
	color: #333;
	border-bottom: 1px solid #eee;
	background-color: #f5f5f5;
}

.vt-tab-item.active {
	background-color: #ffffff;
	color: var(--theme-color, #007aff);
	font-weight: bold;
	border-left: 3px solid var(--theme-color, #007aff);
}

.vt-content {
	width: 70%;
	padding: 15px;
	border-left: 1px solid #eee;
}

.vt-content-item {
	color: #666;
	line-height: 1.6;
}
</style>
